<template>
  <div class="about">
      <button @click="deng">登出</button>
      <p>欢迎来到全栈P9升实训的欢迎页面</p>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/" class="tops">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="box">
      <!-- 头部 -->
      <div class="top">
        <el-input placeholder="请输入内容" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-button type="primary">添加用户</el-button>
      </div>

      <!-- 表格 -->
      <el-table  stripe style="width: 100%">
        <el-table-column prop="#" label="#" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="邮箱"> </el-table-column>
        <el-table-column prop="address" label="电话"> </el-table-column>
        <el-table-column prop="address" label="角色"> </el-table-column>
        <el-table-column prop="address" label="状态"> </el-table-column>
        <el-table-column label="操作"> 
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
            <el-button type="warning" icon="el-icon-s-tools" circle></el-button>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        
    };
  },
  mounted() {
  },
  methods: {
      getData() {
          this.$axios.get('users').then((res) => {
              console.log(res);
            })
      },
      deng() {
          this.$router.push('/')
      }
  },
  components: {},
};
</script>

<style lang='scss' scoped>
.tops {
  margin-left: 88px;
  margin-top: 20px;
}
.box {
  width: 800px;
  height: 500px;
  background-color: #fff;
  margin: 10px auto;
  .top {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding-left: 15px;
    .input-with-select {
      width: 400px;
      height: 30px;
      margin-right: 15px;
    }
  }
}
</style>

